<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>04_SVG-使用方式的汇总</title>
  <!-- 
  SVG（可缩放矢量图形）是一种广泛使用的图形格式，适用于 Web 开发和图形设计。
  1. 直接嵌入 HTML
  SVG 可以直接嵌入到 HTML 文档中，这样可以方便地进行样式和脚本的控制。
   示例：
  <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
    <circle cx="50" cy="50" r="40" fill="red" />
  </svg>
  2. 作为外部文件引入
  SVG 文件可以作为外部文件引入，类似于其他图像格式（如 PNG、JPEG）。使用  `<img>`  标签或 CSS  `background-image`  属性。

   示例：
  <img src="image.svg" alt="Description of the image" />
   使用 CSS：
  .element {
    background-image: url('image.svg');
  }
  3. 使用  `<object>`  标签
  可以使用  `<object>`  标签将 SVG 文件嵌入到 HTML 中，这种方法允许 SVG 文件的交互性和脚本执行。

   示例：
  <object type="image/svg+xml" data="image.svg">Your browser does not support SVG</object>
  4. 使用  `<iframe>`  标签

  SVG 也可以通过  `<iframe>`  标签嵌入，这样可以将 SVG 文件作为独立的文档加载。

   示例：
  <iframe src="image.svg" width="100" height="100"></iframe>
  5. 使用 JavaScript 操作 SVG
  SVG 的元素可以通过 JavaScript 进行动态操作，例如添加事件监听器、修改属性等。

   示例：
  <svg id="mySvg" width="100" height="100" xmlns="http://www.w3.org/2000/svg">
    <circle cx="50" cy="50" r="40" fill="red" />
  </svg>

  <script>
    const svgElement = document.getElementById('mySvg');
    svgElement.addEventListener('click', () => {
      alert('SVG clicked!');
    });
  </script>
  6. 使用 CSS 样式
  SVG 元素可以通过 CSS 进行样式设置，包括填充颜色、边框、阴影等。

   示例：
  circle {
    fill: blue;
    stroke: black;
    stroke-width: 2px;
  }
  7. 动画和交互
  SVG 支持 CSS 动画和 JavaScript 动画，可以实现复杂的视觉效果。

   示例（CSS 动画）：
  @keyframes pulse {
    0% {
      r: 40;
    }
    50% {
      r: 50;
    }
    100% {
      r: 40;
    }
  }

  circle {
    animation: pulse 1s infinite;
  }
  8. 总结
  SVG 是一种灵活且强大的图形格式，适用于多种使用场景。通过直接嵌入、外部文件引入、JavaScript 操作和 CSS 样式，开发者可以充分利用 SVG 的特性，创建动态、交互性强的图形和视觉效果。SVG 的可缩放性和无损特性使其在现代 Web 开发中成为一种理想的选择。
  -->
  <style>
    .box {
      width: 100px;
      height: 100px;
      background-image: url(./rect.svg);
      background-repeat: no-repeat;
    }
  </style>
</head>
<body>

  <h3>01-在img中直接使用svg</h3>
  <img src="./rect.svg" alt="">

  <h3>02-在background-image中使用</h3>
  <div class="box"></div>

  <h3>03-直接在html文件中嵌入svg代码</h3>
  <svg
    width="100"
    height="100"
    xmlns="http://www.w3.org/2000/svg"
  >
    <rect x="10" y="10" width="80" height="80" fill="orange"></rect>
  </svg>
  
</body>
</html>